<template>
	<view class="wrap">
		<u-navbar :title="$t('xhjyjl')" title-width="340" :border-bottom="false" back-icon-color="#fff" title-color="#fff" :background="{ backgroundColor: '#0030A8' }">
			<view class="navbar_link" slot="right"><u-icon name="gengduo" @tap="nav_side()" custom-prefix="custom-icon" color="#fff" size="30"></u-icon></view>
		</u-navbar>
		<view class="tom-container">
			<view class="list">
				<mescroll-uni :fixed="false" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<view @tap="toPage(item)" class="cell" v-for="(item, index) in list" :key="index">
						<view class="cell-head">
							<text class="cell-head-label" :class="{ 'cell-head-label-red': item.type == 1 }">{{ item.type == 1 ? this.$t('mairu') : this.$t('maichu') }}</text>
							<text class="cell-head-value">{{ item.exchangeCoin }}</text>
							<view class="cell-head-right">
								<text class="cell-head-right-status">{{ item.state == 1 ? this.$t('ycj') : item.state == 2 ? this.$t('bfcj') : this.$t('wcj') }}</text>
								<u-icon v-if="item.state != 3" name="arrow-right" size="27"></u-icon>
							</view>
						</view>
						<view class="cell-main">
							<view class="cell-main-item">
								<text class="cell-main-item-label">{{ '时间' }}</text>
								<text class="cell-main-item-value">{{ item.createDate }}</text>
							</view>
							<view class="cell-main-item">
								<text class="cell-main-item-label">{{ '委托价' }}({{ item.exchangeCoinAfter }})</text>
								<text class="cell-main-item-value">{{ item.price }}</text>
							</view>
							<view class="cell-main-item">
								<text class="cell-main-item-label">{{ '委托量' }}({{ item.exchangeCoinBefore }})</text>
								<text class="cell-main-item-value">{{ item.amount }}</text>
							</view>
							<view class="cell-main-item">
								<text class="cell-main-item-label">{{ '成交总额' }}({{ item.exchangeCoinAfter }})</text>
								<text class="cell-main-item-value">{{ item.txTotal }}</text>
							</view>
							<view class="cell-main-item">
								<text class="cell-main-item-label">{{ '成交均价' }}({{ item.exchangeCoinAfter }})</text>
								<text class="cell-main-item-value">{{ item.tx_price }}</text>
							</view>
							<view class="cell-main-item">
								<text class="cell-main-item-label">{{ '成交量' }}({{ item.exchangeCoinBefore }})</text>
								<text class="cell-main-item-value">{{ item.tx_amount }}</text>
							</view>
						</view>
					</view>
				</mescroll-uni>
			</view>
		</view>
		<u-popup v-model="showPopup" mode="right" closeable width="500rpx">
			<view class="popup">
				<view class="cell">
					<view class="cell-label">{{$t('clid')}}</view>
					<view class="cell-main">
						<input class="cell-main-input" type="text" v-model="tacticsId" :placeholder="$t('qsrclid')" placeholder-class="cell-main-input-place" />
					</view>
				</view>
				<view class="cell">
					<view class="cell-label">{{$t('jyd')}}</view>
					<view @tap="showSelect = true" class="cell-main">
						<text v-if="coinsList[coin]" class="cell-main-input" :class="{ 'cell-main-input-place': !coinsList[coin]['label'] }">{{ coinsList[coin]['label'] }}</text>
						<text class="cell-main-input cell-main-input-place" v-else>{{$t('qxzjyd')}}</text>
						<u-icon name="you" custom-prefix="custom-icon" size="28"></u-icon>
					</view>
				</view>
				<view class="cell">
					<view class="cell-label">{{$t('leixing')}}</view>
					<view class="cell-status">
						<text
							@tap="switchStatus(item)"
							v-for="(item, index) in statusList"
							:key="index"
							class="cell-status-text"
							:class="{ 'cell-status-text-active': status == item.value }"
						>
							{{ item.label }}
						</text>
					</view>
				</view>
				<view class="btns">
					<text @tap="reset" class="btns-item">{{$t('chongzhi')}}</text>
					<text @tap="sure" class="btns-item btns-item-active">{{$t('queding')}}</text>
				</view>
			</view>
		</u-popup>
		<u-select :cancelText="$t('quxiao')" :confirmText="$t('queren')" v-model="showSelect" :default-value="[coin || 0]" mode="single-column" :list="coinsList" @confirm="confirmSelect"></u-select>
	</view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			list: [],
			// 是否显示popup
			showPopup: false,
			// 策略id
			tacticsId: '',
			// 是否显示交易对列表
			showSelect: false,
			// 交易对列表
			coinsList: [],
			// 选中交易对
			coin: '',
			// 买卖状态列表
			statusList: [{ label: this.$t('quanbu'), value: '' }, { label: this.$t('mairu'), value: 1 }, { label: this.$t('maichu'), value: 2 }],
			// 买卖状态
			status: ''
		};
	},
	onShow() {
		this.indexData();
	},
	onLoad(info) {
		this.tacticsId = info.tacticsId;
	},
	methods: {
		indexData() {
			this.$api.consoleApi
				.getExchangeCoins({
					exchangeName: 'HUOBI',
				})
				.then(res => {
					let arr = res.data || [];
					let b = [];
					arr.forEach((item, index) => {
						b.push({ label: item.coinName, value: index });
					});
					this.coinsList = b;
					console.log(this.coinsList);
				});
		},
		// 下拉刷新
		downCallback() {
			this.mescroll.resetUpScroll();
		},
		// 上拉加载
		upCallback(page) {
			uni.showLoading({
				mask: true,
				title: '加载中...'
			});
			let params = {};
			if (this.status) {
				params.txType = this.status;
			}
			if (this.coinsList[this.coin]) {
				params.exchangeCoin = this.coinsList[this.coin]['label'];
			}
			if (this.tacticsId) {
				params.tacticsId = this.tacticsId;
			}
			this.$api.consoleApi
				.getTransactionRecords({
					page: page.num,
					...params
				})
				.then(res => {
					let list = res.data || [];
					this.mescroll.endSuccess(list.length);
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(list); //追加新数据
					uni.hideLoading();
				})
				.catch(res => {
					uni.hideLoading();
				});
		},
		toPage(item) {
			if (item.state != 3) {
				uni.navigateTo({
					url: '/pages/Console/TradeRecord/Detail/Detail?item=' + JSON.stringify(item)
				});
			}
		},
		// 切换买卖状态
		switchStatus(item) {
			if (item.value == this.status) return;
			this.status = item.value;
		},
		nav_side() {
			this.showPopup = true;
		},
		// 重置
		reset() {
			this.tacticsId = '';
			this.coin = '';
			this.status = '';
		},
		// 确定
		sure() {
			this.showPopup = false;
			this.mescroll.resetUpScroll();
		},
		// 选择交易对
		confirmSelect(e) {
			this.coin = e[0]['value'];
		}
	}
};
</script>

<style lang="scss" scoped>
.list {
	flex: 1;
	display: flex;
	flex-direction: column;
	border-radius: 20rpx;
	overflow: auto;
	background-color: #fff;
	margin: $nr-padd;
	.cell {
		padding: 30rpx;
		border-bottom: 2rpx solid $page-bg;
		&-head {
			display: flex;
			align-items: center;
			&-label {
				color: $tom-text-green;
				font-size: 32rpx;
				font-weight: bold;
				&-red {
					color: $tom-text-red;
				}
			}
			&-value {
				color: $tom-text-color;
				font-size: 32rpx;
				font-weight: bold;
				margin-left: 20rpx;
			}
			&-right {
				color: $text-color;
				margin-left: auto;
				&-status {
					font-size: 28rpx;
				}
			}
		}
		&-main {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			&-item {
				width: 33.33%;
				margin-top: 30rpx;
				display: flex;
				flex-direction: column;
				&:nth-child(1),
				&:nth-child(4) {
					align-items: flex-start;
				}
				&:nth-child(2),
				&:nth-child(5) {
					align-items: center;
				}
				&:nth-child(3),
				&:nth-child(6) {
					align-items: flex-end;
				}
				&-label {
					color: $tom-text-color;
					font-size: 24rpx;
				}
				&-value {
					margin-top: 20rpx;
					color: $tom-text-sub-color;
					font-size: 24rpx;
					font-weight: bold;
				}
			}
		}
	}
}
.navbar_link {
	margin-right: 36rpx;
}
.popup {
	padding: 120rpx 30rpx;
	height: 100%;
	background-image: url('/static/new_images/showPopup.png');
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 100% 800rpx;
	.cell {
		padding: 30rpx 0;
		&-label {
			color: $tom-text-color;
			font-size: 28rpx;
		}
		&-main {
			margin-top: 30rpx;
			height: 52rpx;
			display: flex;
			align-items: center;
			border: 1px solid $text-color;
			border-radius: 4rpx;
			padding-right: 20rpx;

			color: $text-color;
			&-input {
				flex: 1;
				padding-left: 20rpx;
				color: $text-color;
				font-size: 24rpx;
				&-place {
					color: $text-color;
				}
			}
			.u-icon {
				transform: rotate(90deg);
			}
		}
		&-status {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&-text {
				width: 125rpx;
				height: 52rpx;
				line-height: 52rpx;
				text-align: center;
				border: 1px solid $tom-text-sub-color3;
				border-radius: 4rpx;
				color: $tom-text-sub-color;
				&-active {
					color: $text-color;
					border: 1px solid $text-color;
				}
			}
		}
	}
	.btns {
		margin-top: 30rpx;
		display: flex;
		&-item {
			flex: 1;
			border: 1px solid $text-color;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			color: $tom-text-sub-color2;
			font-size: 28rpx;
			&-active {
				color: #fff;
				border: 1px solid $text-color;
				background-color: $text-color;
			}
		}
	}
}
</style>
